<template>
  <div class="baidu">
    <div id="container"></div>
    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>
</template>

<script>
  import Loading from 'components/loading/Loading'
  import {mapGetters} from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'loading'
      ])
    },
    mounted() {
      this.baiduMap()
    },
    methods: {
      //唤起百度地图app
      jumpNav() {
        window.location.href = "baidumap://map/direction?mode=[transit:公交,driving:驾车]&origin=" + this.$route.params.lat + "," + this.$route.params.lng + "&destination=" + this.$route.params.lat + "," + this.$route.params.lng + "®ion="
      },
      //百度地图
      baiduMap() {
        var map = new BMap.Map("container");
        var _this = this;
        var geolocation = new BMap.Geolocation();
        this.$store.dispatch('showLoading');
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var point = new BMap.Point(r.point.lng, r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
              _this.$store.dispatch('hideLoading');
              map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
              var driving = new BMap.DrivingRoute(map, {
                renderOptions: {
                  map: map,
                  autoViewport: true
                }
              });
              var start = new BMap.Point(rs.point.lng, rs.point.lat);
              var end = new BMap.Point(_this.$route.params.lng, _this.$route.params.lat);
              driving.search(start, end);
            });
          }
        })
      }
    },
    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .baidu
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-f;
    z-index: 999;
    .nav
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: $background-f;
      line-height: 1.5rem;
      text-align: center;
      font-size: .4rem;
      color: $color-text;

  #container
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

</style>
